<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../lib/layui-v2.6.3/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->

    <script src="../../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
    <script src="../../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>

    <script src="../../../lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>

</head>

<body>
    <blockquote class="layui-elem-quote layui-text">

    </blockquote>

    <fieldset class="table-search-fieldset">
        <legend>维修工</legend>
        <div style="margin: 10px 10px 10px 10px">
            <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">维修工姓名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="serviceman_name" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">维修公司</label>
                        <div class="layui-input-inline">
                            <input type="text" name="serviceman_com" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!-- <div class="layui-inline">
                        <label class="layui-form-label">手机号</label>
                        <div class="layui-input-inline">
                            <input type="text" name="security_phone" autocomplete="off" class="layui-input">
                        </div>
                    </div> -->

                    <div class="layui-inline">
                        <button type="submit" class="layui-btn layui-btn-primary" lay-submit
                            lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                    </div>
                </div>
            </form>
        </div>
    </fieldset>


    <table class="layui-hide  lay-data=" id="servicemanTable" lay-filter="servicemanTable"></table>


    <script id="picTpl">
        <img src="{{d.household_pic}}" name="household_pic" style="width:100%; height:100%;" />
    </script>
    <script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
      <button class="layui-btn layui-btn-sm" lay-event="householdadd">添加</button>
      <button class="layui-btn layui-btn-sm" lay-event="householdsdel">批量删除</button>
      <!-- <button class="layui-btn layui-btn-sm" lay-event="isAll"></button> -->
    </div>
  </script>


    <script type="text/html" id="barDemo">

    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  </script>



    <script>


        layui.use('table', function () {
            var table = layui.table,
                $ = layui.jquery,
                form = layui.form;


            // 监听搜索操作
            form.on('submit(data-search-btn)', function (data) {
                var result = JSON.stringify(data.field);

                //执行搜索重载
                table.reload('servicemanTable', {
                    page: {
                        curr: 1
                    }
                    , where: {
                        // 查询条件
                        serviceman_name: data.field.serviceman_name,
                        serviceman_tel: data.field.serviceman_tel

                    }
                }, 'data');

                return false;
            });


            table.render({
                elem: '#servicemanTable'
                , url: 'http:///localhost:8080/serviceman/servicemanList'
                , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , title: '智能家居'
                , totalRow: true
                , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    , layEvent: 'LAYTABLE_TIPS'
                    , icon: 'layui-icon-tips'
                }]
                , cols: [[
                    { type: 'checkbox', fixed: 'left' },
                    { field: 'serviceman_id', title: 'ID', fixed: 'left', unresize: true, sort: true }
                    , { field: 'serviceman_name', title: '维修工姓名', edit: 'text' , sort: true}
                    , { field: 'serviceman—_com', title: '维修公司', edit: 'text', sort: true }

                    , { field: 'serviceman_tel', title: '维修工电话', sort: true }

                    
                    , { field: 'serviceman_pic', width: 150, title: '家居照片', templet: '#picTpl' }
                    , { field: 'serviceman_isdepar', width: 150, title: '是否离职'}
                    , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 }

                ]]
                , page: true
                , response: {
                    statusCode: 0 //重新规定成功的状态码为 200，table 组件默认为 0
                }
                , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": res.data.count, //解析数据长度
                        "data": res.data.servicemenList //解析数据列表
                    };
                }

            });

            //头工具栏事件
            table.on('toolbar(servicemanTable)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {

                    // 添加
                    case 'householdadd':
                        {
                            var index = layer.open({
                                title: '添加家居',
                                type: 2,
                                shade: 0.2,
                                maxmin: true,
                                shadeClose: true,
                                area: ['80%', '80%'],
                                content: 'servicemanadd.html',
                                //列表重新加载
                                end: function (index) {
                                    table.reload('servicemanTable');
                                }
                            });
                        };
                        $(window).on("resize", function () {
                            layer.full(index);
                        });
                        break;
                    // 批量删除
                    case 'householdsdel':
                        // 选中的数据
                        var data = checkStatus.data;
                        $.ajax({
                            type: "post",
                            url: "http://localhost:8080/serviceman/servicemanDel",
                            contentType: "application/json",
                            data: JSON.stringify(data),
                            dataType: "json",
                            success: function (res) {

                                if (res.code == 0) {
                                    layer.msg('删除成功', function () {

                                        table.reload('servicemanTable');
                                        // 关闭弹出层
                                        var iframeIndex = parent.layer.getFrameIndex(window.name);
                                        parent.layer.close(iframeIndex);
                                        layer.close(index)
                                        table.reload("#servicemanTable")

                                    })

                                } else {
                                    layer.msg('删除失败', function () {

                                    });
                                }
                            }

                        })


                        break;

                    // case 'isAll':
                    //   layer.msg(checkStatus.isAll ? '全选': '未全选');
                    // break;

                    //自定义头工具栏右侧图标 - 提示
                    case 'LAYTABLE_TIPS':
                        layer.alert('这是工具栏右侧自定义的一个图标按钮');
                        break;
                };


            });

            //监听行工具事件
            table.on('tool(servicemanTable)', function (obj) {
                var data = [obj.data];
                console.log(obj)
                // 将读取的一行数据存储到局部存储器
                var localhostStr = localStorage.setItem("localhostStr", JSON.stringify(obj.data));

                if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        obj.del();

                        $.ajax({
                            type: "post",
                            url: "http://localhost:8080/serviceman/servicemanDel",
                            contentType: "application/json",
                            data: JSON.stringify(data),
                            dataType: "json",
                            success: function (res) {

                                if (res.code == 0) {
                                    layer.msg('删除成功', function () {

                                        
                                        // 关闭弹出层
                                        var iframeIndex = parent.layer.getFrameIndex(window.name);
                                        parent.layer.close(iframeIndex);
                                        layer.close(index)
                                        table.reload('servicemanTable');

                                    })

                                } else {
                                    layer.msg('删除失败', function () {

                                    });
                                }
                            }

                        })
                    
                    
                    
                        layer.close(index);
                    });



                } else if (obj.event === 'edit') {
                    var index = layer.open({
                        title: '编辑家居',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        shadeClose: true,
                        area: ['80%', '80%'],
                        content: 'servicemanedit.html',
                        //列表重新加载
                        end: function (index) {
                            table.reload('servicemanTable');
                        }

                    });

                    $(window).on("resize", function () {
                        layer.full(index);
                    });

                    return false;
                }
            });




        });

    </script>


</body>

</html>